<template>
  <div class="login-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="账号登录" name="account">
        <el-form :model="accountForm" label-width="auto" ref="userRef">
          <el-form-item
            label="账号"
            prop="username"
            :error="accountError.username"
            :rules="[
              { required: true, message: '请输入账号', trigger: 'blur' }
            ]"
          >
            <el-input v-model="accountForm.username" placeholder="账号" />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :error="accountError.password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model="accountForm.password"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-button
            class="button"
            type="primary"
            @click="() => login('account')"
            >登录</el-button
          >
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="手机登录" name="mobile">
        <el-form
          :model="mobileForm"
          class="mobile-login-form"
          label-width="auto"
          ref="mobileRef"
        >
          <el-form-item
            label="手机号码"
            prop="mobile"
            :rules="[
              { required: true, message: '请输入手机号码', trigger: 'blur' }
            ]"
          >
            <el-input v-model="mobileForm.mobile" placeholder="手机号码" />
          </el-form-item>
          <el-form-item
            label="验证码"
            prop="code"
            :rules="[
              { required: true, message: '请输入验证码', trigger: 'blur' }
            ]"
          >
            <div class="code-input">
              <el-input
                v-model="mobileForm.code"
                class="code-input-field"
                placeholder="验证码"
              />
              <el-button
                :disabled="btnSmsdisabled"
                class="send-code-btn"
                @click="sendCode"
                >{{ btnSmsText }}</el-button
              >
            </div>
          </el-form-item>
          <el-button
            class="button"
            type="primary"
            @click="() => login('mobile')"
            >登录</el-button
          >
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="register-link">
      <router-link to="/register">还没有账号？点击注册</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// import { LoginAPI } from '@/api/user'
const activeTab = ref('account')
const accountForm = ref({ username: '', password: '' })
const accountError = ref({ username: '', password: '' })
const mobileForm = ref({ mobile: '', code: '' })
const btnSmsText = ref('发送验证码')
const btnSmsdisabled = ref(false)

const sendCode = () => {
  btnSmsdisabled.value = true
  let n = 5
  let interval = window.setInterval(() => {
    n -= 1
    btnSmsText.value = `${n}秒后重发`
    if (n < 1) {
      btnSmsText.value = '重新发送'
      // 停止计时器
      window.clearInterval(interval)
      btnSmsdisabled.value = false
    }
  }, 1000)
}
const login = type => {
  // const data = type === 'acount' ? accountForm.value : mobileForm
  if (type === 'account') {
    proxy.$refs.userRef.validate(valid => {
      // 校验失败
      if (!valid) {
        return false
      }
      // ElMessage.error('错误')
      // 每个表单展示相应的错误
    })
  } else if (type == 'mobile') {
    proxy.$refs.mobileRef.validate(valid => {
      if (!valid) {
        return
      }
    })
  }
}
// const data = async () => {
//   await LoginAPI()
// }
// onMouted(() => {
//   sendCode
// })
</script>

<style lang="scss" scoped>
.login-container {
  width: 400px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  .button {
    display: flow-root;
    float: right;
  }
}

.mobile-login-form .code-input {
  display: flex;
  align-items: center;
}

.mobile-login-form .code-input-field {
  flex: 1; /* 使输入框填满剩余空间 */
  margin-right: 10px; /* 输入框和按钮之间的间距 */
}

.mobile-login-form .send-code-btn {
  width: 120px; /* 设置发送按钮宽度 */
}
.register-link {
  margin-top: 20px;
}
</style>
